import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin } from 'antd';
import { connect } from 'dva';
import React, { PureComponent } from 'react';

import 'moment/locale/zh-cn';
import { convertDirection } from '@/src/utils/commonFunc';

import myStyle from './index.less';

import { SecondHeaderC } from '../../../comps';
import LimitDetailTableC from '../../InvestmentMonitor/limitDetailTable/warning';

const subNameStr = (text) => {
  if (!text) return '--';
  let str = text;
  if (text && text.length > 10) {
    str = `${text.substring(0, 10)}...`;
  }
  return str;
};
@Form.create()
class LimitApprovalC extends PureComponent {
  state = {
    instructionId: undefined, // 流程id
    info: {}, // 限额基本信息
    limitData: [], // 风险条目列表
    timeStamp: undefined, // 时间戳
  };

  componentDidMount() {}

  // eslint-disable-next-line react/no-deprecated
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.state.timeStamp !== nextProps.timeStamp) {
      this.setState(
        {
          instructionId: nextProps.businessKey,
          timeStamp: nextProps.timeStamp,
        },
        () => {
          this.queryLimitApprovalList();
          this.queryLimitApprovalInfo();
        },
      );
    }
  }

  // 查询风险条目列表
  queryLimitApprovalList = () => {
    const { instructionId } = this.state;
    if (!instructionId) return;
    this.props.dispatch({
      type: 'limitApprovalM/queryLimitApprovalList',
      payload: {
        instructionId,
        currentPage: 1,
        numInPage: 999,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            limitData: [...data],
          });
        } else {
          this.setState({
            limitData: [],
          });
        }
      },
    });
  };

  // 查询基本信息
  queryLimitApprovalInfo = () => {
    const { instructionId } = this.state;
    if (!instructionId) return;
    this.props.dispatch({
      type: 'limitApprovalM/queryLimitApprovalInfo',
      payload: {
        id: instructionId,
      },
      callback: (type, data) => {
        if (type == 'success') {
          this.setState({
            info: data,
          });
        } else {
          this.setState({
            info: {},
          });
        }
      },
    });
  };

  render() {
    const { info, limitData } = this.state;
    const {
      globalM: { dataDictionary },
      loading,
    } = this.props;
    return (
      <div className={myStyle.limitApproval}>
        <SecondHeaderC title='基本信息' />
        <Spin spinning={loading.effects['limitApprovalM/queryLimitApprovalInfo']}>
          <Row className='ruleInfo'>
            <Col span={6} className='modal_flex'>
              <span>产品名称：</span>
              <span title={info.productName}>{subNameStr(info.productName)}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>组合名称：</span>
              <span title={info.portfolioInfoName}>{subNameStr(info.portfolioInfoName)}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>证券代码：</span>
              <span>{info.tradingCode || '--'}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>证券名称：</span>
              <span title={info.tradingName}>{subNameStr(info.tradingName)}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>方向：</span>
              <span>{info.orderSide !== '0' && info.orderSide && dataDictionary ? convertDirection(info.type, info.orderSide, dataDictionary) : '--'}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>数量：</span>
              <span>{info.orderQty || '--'}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>价格：</span>
              <span>{info.price || '--'}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>价格(全价)：</span>
              <span>{info.fullPrice || '--'}</span>
            </Col>
            <Col span={6} className='modal_flex'>
              <span>金额(全价)：</span>
              <span>{info.amount || '--'}</span>
            </Col>
          </Row>
        </Spin>
        <SecondHeaderC title='风险条目' />
        {limitData &&
          limitData.map((item, key) => (
            // eslint-disable-next-line react/no-array-index-key
            <div key={key}>
              <p className='hidden' title={item.ruleDesc}>
                <span>
                  风险
                  {key + 1}:
                </span>
                {item.ruleDesc}
              </p>
              <LimitDetailTableC isRed url='getWarningDetails' search={item} />
            </div>
          ))}
      </div>
    );
  }
}
export default connect(({ limitApprovalM, loading, globalM }) => ({
  limitApprovalM,
  loading,
  globalM,
}))(LimitApprovalC);
